<template>
  <el-button @click="modelShow = true" title="颜色" size="small">
    <svg-icon name="fa fa-palette"></svg-icon>
  </el-button>
  <el-dialog v-model="modelShow" title="主题颜色选择" width="95vw">
    <div class="go-system-color-setting">
      <div class="model-content" ref="contentLeftRef">
        <div class="content-left" v-if="modelShow">
          <color-list :designColor="designColorSplit" @colorSelectHandle="colorSelectHandle"></color-list>
        </div>
        <div class="content-right">
          <div class="color-name-detail">
            <el-text v-if="appThemeDetail" class="color-name">{{ appThemeDetail.name }}</el-text>
            <el-text v-else class="color-name">中国色</el-text>
            <el-text v-if="appThemeDetail" class="color-name-Pinyin">{{ appThemeDetail.pinyin.toUpperCase() }}</el-text>
            <div v-if="appThemeDetail" class="select-color" :style="{ backgroundColor: designStore.appTheme }"></div>
          </div>
          <!-- <img :src="themeColorLogo" /> -->
        </div>
      </div>
      <div class="model-footer">
          <el-link href="http://zhongguose.com" target="_blank">中国色列表来自于： http://zhongguose.com</el-link>
      </div>
    </div>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, computed, watch, toRefs } from 'vue'
import { useDesignStore } from '@/stores/modules/designStore/designStore'
import { AppThemeColorType } from '@/stores/modules/designStore/designStore.d'
import themeColorLogo from '@/assets/images/theme-color.png'
import { loadAsyncComponent } from '@/utils/components'
import { useScroll } from '@vueuse/core'
import designColor from '@/settings/designColor.json'

const ColorList = loadAsyncComponent(() =>
  import('./components/ColorList.vue')
)
let splitNumber = 50

const designStore = useDesignStore()
const modelShow = ref(false)
const contentLeftRef = ref<HTMLElement | null>(null)
const designColorSplit = ref(designColor.slice(0, splitNumber))

const { x, y, isScrolling, arrivedState, directions  } = useScroll(contentLeftRef, {
  offset: { bottom: 200 },
})
console.log("arrivedState",x.value, y.value, isScrolling.value, arrivedState, directions );

const { bottom } = toRefs(arrivedState)

const appThemeDetail = computed(() => {
  return designStore.getAppThemeDetail
})

const colorSelectHandle = (color: AppThemeColorType) => {
  designStore.setAppColor(color)
}

watch(() => bottom.value, (newData: boolean) => {
  console.log("bottom.value",bottom.value);
  
  if (newData) {
    splitNumber = splitNumber + 50
    designColorSplit.value = designColor.slice(0, splitNumber)
  }
})

watch(() => modelShow.value, (modelShow: boolean) => {
  if (!modelShow) {
    splitNumber = 50
  }
})
</script>

<style lang="scss" scoped>
.model-content {
  display: flex;
  justify-items: center;
  height: calc(90vh - 200px);
  overflow: auto;

  .content-left {
    flex: 1;
  }

  .content-right {
    flex: 0 0 300px;
    position: absolute;
    right: 50px;
    top: 0;
    width: 300px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;

    .color-name-detail {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-right: 40px;

      .go-flex-items-center {
        flex-direction: column;
      }

      .select-color {
        margin-top: 20px;
        width: 100px;
        height: 20px;
        border-radius: 3px;
        background-image: url("@/assets/images/texture.png");
      }

      .color-name {
        font-family: serif;
        font-size: 80px;
        margin: 0 auto;
        display: block;
        width: 110px;
        text-align: center;
        background-position: center top;
        background-repeat: no-repeat;
      }

      .color-name-Pinyin {
        text-align: center;
        font-family: Georgia;
        font-size: 16px;
      }
    }
  }
}
.model-footer{
  margin-top: 20px;
  color: var(--color-primary-light-3);
  text-align: right;
  &>a{
    cursor: pointer;
  }
}
</style>
